Corrected Placeholders not vertically centered in text inputs. @chiragsalian kindly review pull request, please message me if any information missing from my side. I closed previous pull request #4823 because I forgot to sign commit with gpg.

Details

Basically when there is no focus it shows ExpensiTextInputLabel.js component. We need to update top value for expensiTextInputLabel style within src/styles/styles.js file. i.e. change top: 14 to top: 16 as under:

expensiTextInputLabel: {
...
    top: 16,
...
},

So now we moved inactive label default position 2 pt down, So to keep the active label (i.e. when focused) at the same position we have to set ACTIVE_LABEL_TRANSLATE_Y = -12 (at present it is -10) within src/components/ExpensiTextInput/BaseExpensiTextInput.js (line 12)

Fixed Issues

$ #4675

Tests

1. Run app on any platform
2. Check text input placeholder on Login screen, now it will show text input placeholder vertically centered when no input text.
3. For after login screen, Text input with no value will show placeholder vertically centered where text input used.

QA Steps

1. Login screen text input. When there is no focus on text input, placeholder shows vertically centered now. (previously it was vertically off centered)
2. After login any text input. When there is no focus on text input, placeholder shows vertically centered now. (previously it was vertically off centered)

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android